<template>
    <div ref="box" class="cir_box" :style="{ height: height + 'px' }">
        <div v-if="dataReady">
            <div v-for="(item, index) in nodes" :key="index" :class="['show_zhan_img', 'img_detail'+index]" :style="{left: pos[index].x +'px', top: pos[index].y + 'px'}">
                {{ item.name }}
            </div>
        </div>
    </div>
</template>
<script>
  import { ref, watch, onMounted, defineComponent } from 'vue'
  export default defineComponent({
    props: {
        nodes: Object,
        height: {
            type: Number,
            default: 0
        }
    },
    setup (props) {
        const box = ref(null)
        const pos = ref([])
        const dataReady = ref(false)
        const setSize = () => {
            const size = box.value.getBoundingClientRect()
            const ratX = size.width / 3.5
            const ratY = size.height / 3.5
            props.nodes.forEach((item, index) => {
                const angle = (index / props.nodes.length) * 360
                const rad = angle * Math.PI / 180
                const x = ratX * Math.cos(rad) + size.left + size.width / 8.5
                const y = ratY * Math.sin(rad) + size.top + size.height / 5.5
                pos.value.push({ x: x, y: y })
            })
        }
        onMounted(function () {
            if (box.value) {
                setSize()
                dataReady.value = true
            }
      })
      watch(() => props.height, (newVal) => {
            if (newVal) {
                setTimeout(() => {
                    pos.value = []
                    setSize()
                }, 100)
            }
        })
      return {
        box,
        pos,
        dataReady
      }
    },
    methods: {
      // 定义一个节点点击事件
      handleNodeClicked (clickedNode) {
        this.$emit('node-clicked', clickedNode)
      }
    }
  })
</script>
<style scoped>
.cir_box{
    position: relative;
}
.show_zhan_img{
    font-size: smaller;
    position: absolute;
    background-repeat: no-repeat;
    width: 100px;
    height: 150px;
    color: #1af7ff;
    font-weight: bold;
    cursor: pointer;
    background-image: url('~@/assets/zhan_bg.png');
}
.img_detail0 {
    background-image: url('~@/assets/zhan_bg.png');
}
.img_detail1 {
    height: 180px;
    background-image: url('~@/assets/zhan_bg.png');
}
.img_detail2 {
    height: 180px;
    background-image: url('~@/assets/zhan_bg3.png');
}
.img_detail3 {
    background-image: url('~@/assets/zhan_bg2.png');
}
</style>
